<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>虚拟宠物养成游戏</title>
    <style>
        body {
            font-family: 'Arial Rounded MT Bold', 'Arial', sans-serif;
            background-color: #f9f4e8;
            color: #5a3e36;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            text-align: center;
        }

        .game-container {
            background-color: #fff9e6;
            border-radius: 20px;
            padding: 25px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
            border: 3px solid #e8d5b5;
        }

        h1 {
            color: #e67e7e;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
            margin-bottom: 30px;
        }

        .pet-display {
            background-color: #f0e6d2;
            border-radius: 15px;
            padding: 20px;
            margin-bottom: 20px;
            position: relative;
            min-height: 150px;
        }

        .pet-status {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            margin-bottom: 20px;
        }

        .status-item {
            background-color: #e8d5b5;
            border-radius: 10px;
            padding: 10px 15px;
            margin: 5px;
            min-width: 120px;
        }

        .progress-bar {
            height: 10px;
            background-color: #e0e0e0;
            border-radius: 5px;
            margin-top: 5px;
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            border-radius: 5px;
        }

        .hunger-fill {
            background-color: #e67e7e;
            width: 50%;
        }

        .happiness-fill {
            background-color: #7ec16e;
            width: 50%;
        }

        .controls {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
            margin-bottom: 20px;
        }

        button {
            background-color: #e8d5b5;
            border: none;
            border-radius: 50px;
            padding: 12px 20px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s;
            min-width: 120px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        button:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        button:active {
            transform: translateY(1px);
        }

        #feed-btn {
            background-color: #f8b195;
        }

        #play-btn {
            background-color: #a8e6cf;
        }

        #status-btn {
            background-color: #dcedc1;
        }

        #exit-btn {
            background-color: #ffaaa5;
        }

        #cheat-btn {
            background-color: #ff8b94;
        }

        .log-container {
            background-color: #f0e6d2;
            border-radius: 10px;
            padding: 15px;
            height: 150px;
            overflow-y: auto;
            text-align: left;
            font-family: 'Courier New', monospace;
            margin-top: 20px;
        }

        .log-entry {
            margin-bottom: 5px;
            padding-bottom: 5px;
            border-bottom: 1px dashed #e8d5b5;
        }

        .pet-image {
            font-size: 80px;
            margin: 20px 0;
            transition: all 0.3s;
        }

        .happy {
            color: #ffd700;
            transform: scale(1.1);
        }

        .hungry {
            color: #ff6b6b;
            animation: shake 0.5s infinite;
        }

        @keyframes shake {

            0%,
            100% {
                transform: translateX(0);
            }

            25% {
                transform: translateX(-5px);
            }

            75% {
                transform: translateX(5px);
            }
        }

        .inventory {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 10px;
            margin: 20px 0;
        }

        .food-item {
            font-size: 24px;
            animation: float 3s ease-in-out infinite;
        }

        @keyframes float {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-10px);
            }
        }

        .day-counter {
            font-size: 18px;
            font-weight: bold;
            color: #e67e7e;
            margin-bottom: 15px;
        }

        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 100;
            justify-content: center;
            align-items: center;
        }

        .modal-content {
            background-color: #fff9e6;
            padding: 30px;
            border-radius: 20px;
            max-width: 80%;
            text-align: center;
            animation: pop 0.3s;
        }

        @keyframes pop {
            0% {
                transform: scale(0.5);
                opacity: 0;
            }

            100% {
                transform: scale(1);
                opacity: 1;
            }
        }

        .modal-title {
            font-size: 24px;
            color: #e67e7e;
            margin-bottom: 20px;
        }

        .modal-message {
            margin-bottom: 20px;
            font-size: 18px;
        }

        .modal-btn {
            padding: 10px 20px;
            background-color: #e8d5b5;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            font-size: 16px;
            margin: auto;
        }
    </style>
</head>

<body>
    <div class="game-container">
        <h1>🐾 虚拟宠物养成游戏 🐾</h1>

        <div class="day-counter" id="day-counter">—— 第1天 ——</div>

        <div class="pet-display">
            <div class="pet-image" id="pet-image">🐶</div>
            <div class="pet-name" id="pet-name">未命名</div>
        </div>

        <div class="pet-status">
            <div class="status-item">
                <div>🍔 饥饿值</div>
                <div id="hunger-value">50/100</div>
                <div class="progress-bar">
                    <div class="progress-fill hunger-fill" id="hunger-bar"></div>
                </div>
            </div>
            <div class="status-item">
                <div>😊 快乐值</div>
                <div id="happiness-value">50/100</div>
                <div class="progress-bar">
                    <div class="progress-fill happiness-fill" id="happiness-bar"></div>
                </div>
            </div>
            <div class="status-item">
                <div>📅 年龄</div>
                <div id="age-value">0天</div>
            </div>
        </div>

        <div class="inventory" id="inventory">
            <div>🛒 食物库存:</div>
        </div>

        <div class="controls">
            <button id="feed-btn">🍖 喂食</button>
            <button id="play-btn">🎾 玩耍</button>
            <button id="status-btn">📋 状态</button>
            <button id="cheat-btn">🛠️ 增加食物</button>
            <button id="exit-btn">🚪 退出</button>
        </div>

        <div class="log-container" id="log-container">
            <!-- 日志将在这里显示 -->
        </div>
    </div>

    <div class="modal" id="name-modal">
        <div class="modal-content">
            <div class="modal-title">欢迎来到宠物养成游戏</div>
            <div class="modal-message">请为你的宠物取个名字：</div>
            <input type="text" id="pet-name-input" placeholder="输入宠物名字"
                style="padding: 10px; font-size: 16px; width: 80%; margin-bottom: 20px;">
            <button class="modal-btn" id="start-btn">开始游戏</button>
        </div>
    </div>

    <div class="modal" id="game-over-modal">
        <div class="modal-content">
            <div class="modal-title" id="game-over-title">游戏结束</div>
            <div class="modal-message" id="game-over-message"></div>
            <button class="modal-btn" id="restart-btn">重新开始</button>
        </div>
    </div>

    <script>
        // 游戏状态
        let pet = {
            name: "",
            hunger: 50,
            happiness: 50,
            age: 0
        };

        let foodInventory = ['🍖', '🍖', '🍖'];
        let gameOver = false;

        // DOM 元素
        const petNameElement = document.getElementById('pet-name');
        const hungerValueElement = document.getElementById('hunger-value');
        const happinessValueElement = document.getElementById('happiness-value');
        const ageValueElement = document.getElementById('age-value');
        const hungerBarElement = document.getElementById('hunger-bar');
        const happinessBarElement = document.getElementById('happiness-bar');
        const inventoryElement = document.getElementById('inventory');
        const logContainerElement = document.getElementById('log-container');
        const dayCounterElement = document.getElementById('day-counter');
        const petImageElement = document.getElementById('pet-image');

        // 按钮
        const feedBtn = document.getElementById('feed-btn');
        const playBtn = document.getElementById('play-btn');
        const statusBtn = document.getElementById('status-btn');
        const cheatBtn = document.getElementById('cheat-btn');
        const exitBtn = document.getElementById('exit-btn');
        const startBtn = document.getElementById('start-btn');
        const restartBtn = document.getElementById('restart-btn');

        // 模态框
        const nameModal = document.getElementById('name-modal');
        const gameOverModal = document.getElementById('game-over-modal');
        const petNameInput = document.getElementById('pet-name-input');
        const gameOverTitle = document.getElementById('game-over-title');
        const gameOverMessage = document.getElementById('game-over-message');

        // 显示日志
        function addLog(message) {
            const logEntry = document.createElement('div');
            logEntry.className = 'log-entry';
            logEntry.textContent = message;
            logContainerElement.appendChild(logEntry);
            logContainerElement.scrollTop = logContainerElement.scrollHeight;
        }

        // 更新UI
        function updateUI() {
            petNameElement.textContent = pet.name;
            hungerValueElement.textContent = `${pet.hunger}/100`;
            happinessValueElement.textContent = `${pet.happiness}/100`;
            ageValueElement.textContent = `${pet.age}天`;

            hungerBarElement.style.width = `${pet.hunger}%`;
            happinessBarElement.style.width = `${pet.happiness}%`;

            // 更新食物库存显示 - 修改为"🍖x多少份"的形式
            inventoryElement.innerHTML = `<div>🛒 食物库存: 🍖x${foodInventory.length}</div>`;

            // 更新天数显示
            dayCounterElement.textContent = `—— 第${pet.age + 1}天 ——`;

            // 更新宠物表情
            updatePetEmotion();
        }

        // 更新宠物表情
        function updatePetEmotion() {
            petImageElement.className = 'pet-image';

            if (pet.hunger > 70) {
                petImageElement.classList.add('hungry');
            } else if (pet.happiness > 70) {
                petImageElement.classList.add('happy');
            }
        }

        // 喂食功能
        function feedPet() {
            if (foodInventory.length === 0) {
                addLog("❌ 食物不足，无法喂食！");
                return false;
            }
            foodInventory.pop();
            pet.hunger = Math.max(pet.hunger - 15, 0);
            addLog("🍖 喂食成功，饥饿值降低！");
            return true;
        }

        // 玩耍功能
        function playWithPet() {
            pet.happiness = Math.min(pet.happiness + 10, 100);
            pet.hunger = Math.min(pet.hunger + 5, 100);
            addLog("🎾 玩耍成功，快乐值增加，饥饿值略微上升！");
            return true;
        }

        // 显示状态
        function showStatus() {
            addLog(`
    🐾 宠物名: ${pet.name}
    🍔 饥饿值: ${pet.hunger}/100
    😊 快乐值: ${pet.happiness}/100
    📅 年龄: ${pet.age}天
    🛒 食物库存: 🍖x${foodInventory.length}
            `);
        }

        // 更新宠物状态
        function updatePet() {
            // 自然变化
            pet.hunger = Math.min(pet.hunger + 5, 100);
            pet.happiness = Math.max(pet.happiness - 3, 0);
            pet.age++;

            // 随机事件（20%概率获得食物）
            if (Math.random() < 0.2) {
                foodInventory.push('🍖');
                addLog("🎁 随机事件：获得了一份食物！");
            }

            updateUI();
        }

        // 检查游戏结束
        function checkGameOver() {
            if (pet.hunger >= 100) {
                gameOverTitle.textContent = "游戏结束";
                gameOverMessage.textContent = `😿 ${pet.name}因为饥饿过度死亡！`;
                showGameOverModal();
                return true;
            }
            if (pet.happiness <= 0) {
                gameOverTitle.textContent = "游戏结束";
                gameOverMessage.textContent = `😿 ${pet.name}因为不快乐而死亡！`;
                showGameOverModal();
                return true;
            }
            if (pet.age >= 30) {
                gameOverTitle.textContent = "游戏胜利";
                gameOverMessage.textContent = `🎉 恭喜！你成功照顾${pet.name}30天！`;
                showGameOverModal();
                return true;
            }
            return false;
        }

        // 显示游戏结束模态框
        function showGameOverModal() {
            gameOver = true;
            gameOverModal.style.display = 'flex';
        }

        // 初始化游戏
        function initGame() {
            pet = {
                name: petNameInput.value || "无名宠物",
                hunger: 50,
                happiness: 50,
                age: 0
            };

            foodInventory = ['🍖', '🍖', '🍖'];
            gameOver = false;

            logContainerElement.innerHTML = '';
            addLog(`欢迎来到宠物养成游戏！你的宠物${pet.name}已经准备好开始冒险了！`);

            updateUI();
            nameModal.style.display = 'none';
        }

        // 事件监听
        feedBtn.addEventListener('click', () => {
            if (gameOver) return;
            const actionPerformed = feedPet();
            if (actionPerformed) {
                updatePet();
                gameOver = checkGameOver();
            }
            updateUI();
        });

        playBtn.addEventListener('click', () => {
            if (gameOver) return;
            const actionPerformed = playWithPet();
            if (actionPerformed) {
                updatePet();
                gameOver = checkGameOver();
            }
            updateUI();
        });

        statusBtn.addEventListener('click', () => {
            if (gameOver) return;
            showStatus();
        });

        cheatBtn.addEventListener('click', () => {
            if (gameOver) return;
            for (let a = 0; a <= 30; a++) {
                foodInventory.push('🍖');
            }
            addLog('🛠️ 食物+30，使用作弊码成功！');
            updateUI();
        });

        exitBtn.addEventListener('click', () => {
            addLog("👋 退出游戏，再见！");
            gameOver = true;
        });

        startBtn.addEventListener('click', initGame);
        // startBtn.addEventListener('keyup', function (e) {
        //     if (e.key === 'Enter') { initGame }
        // });
        // 添加输入框的Enter键监听
        petNameInput.addEventListener('keyup', function (e) {
            if (e.key === 'Enter') {
                initGame();
            }
        });

        restartBtn.addEventListener('click', () => {
            gameOverModal.style.display = 'none';
            nameModal.style.display = 'flex';
            petNameInput.value = pet.name;
        });

        // 显示名字输入模态框并自动聚焦
        nameModal.style.display = 'flex';
        petNameInput.focus();  // 添加这行代码使输入框自动获得焦点
    </script>
</body>

</html>